<template>
  <el-dialog
    v-model="centerDialogVisible"
    title="已实现功能"
    width="30%"
    align-center
    @open="handleDialogOpen"
  >
    <div class="demo-collapse">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="" name="1">
          <template #title>
            <el-icon style="color: #67c23a; font-size: 25px">
              <info-filled />
            </el-icon>
            <div class="contendTitle">从0到1实现系统架构搭建</div>
          </template>
          <div class="contendText">
            <div>1:本系统采用前后端分离模式</div>
            <div>
              2:前端Vue（Element Plus）,后端.Net8
              WebApi,都是从0到1搭建系统，没有使用任何模板。适合任何阶段的开发者模仿搭建。
            </div>
            <div>
              3:观看搭建过程，关注【微信公众号】或查看首页【关于系统】栏目。
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="" name="2">
          <template #title>
            <el-icon style="color: #67c23a; font-size: 25px">
              <Check />
            </el-icon>
            <div class="contendTitle">已实现功能</div>
          </template>
          <div class="contendText">
            <div>
              <el-tag class="mx-1" effect="Light" type="success">架构</el-tag
              >1:jwt身份验证
            </div>
            <div>
              <el-tag class="mx-1" effect="Light" type="success">架构</el-tag
              >2:Autofac依赖注入。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light" type="success">架构</el-tag
              >3:全局异常捕获。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light" type="success">架构</el-tag
              >4:Aop动态代理。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>5:用户角色授权
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>6:菜单权限分配。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>7:菜单按钮权限分配。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>8:数据按钮权限分配（颗粒级权限）。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>9:数据列权限分配（颗粒级权限）。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light">权限</el-tag>10:数据行权限分配（颗粒级权限）。
            </div>
            <div>
              <el-tag class="mx-1" effect="Light" type="danger">样式</el-tag
              >11:按钮样式统一调度。
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="" name="3">
          <template #title>
            <el-icon style="color: #e6a23c; font-size: 25px">
              <Edit />
            </el-icon>
            <div class="contendTitle">正在开发功能（下次更新）</div>
          </template>
          <div class="contendText">
            <div>
              1:新增更多规则字段
            </div>
            <div>
              2:系统监控
            </div>
            <div>
              如：接口性能监控、接口调用监控、模块访问监控。
            </div>
            <!-- <div style="color: red">说明：该功能属于颗粒级权限控制</div> -->
          </div>
        </el-collapse-item>
        <el-collapse-item title="" name="4">
          <template #title>
            <el-icon style="color: #f56c6c; font-size: 25px">
              <Filter />
            </el-icon>
            <div class="contendTitle">规划中的功能（高级、颗粒级权限）</div>
          </template>
          <div class="contendText">
            <!-- <div>
              1:动态数据列权限控制（同一个列表，张三能看见员工的工资，李四者不能），该权限可以动态通过配置规则控制
            </div>
            <div>
              2:动态数据行权限控制（同一个列表，张三能看见部门领导的个人信息，李四者不能），该权限可以动态通过配置规则控制
            </div> -->
            <div>1:可视化表单设计（动态拖拽设计表单）</div>
            <div>2:可视化审批流程设计（动态拖拽审批设计流程）</div>
            <!-- <div>
              5:动态接口权限（可控动态制系统中所有接口使用权限），该权限可以动态通过配置规则控制
            </div>
            <div>6:记录所有操作日志</div> -->
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
          >知道了</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script  lang="ts" >
import { ref, defineComponent } from "vue";

export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
      required: true,
    },
  },

  setup(props) {
    const centerDialogVisible = ref(props.isVisibles);
    const activeName = ref("2");
    //打开时加载
    const handleDialogOpen = function () {
      centerDialogVisible.value = true;
    };

    return { centerDialogVisible, handleDialogOpen, activeName };
  },
  components: {},
});
</script>
  <style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.contendText {
  display: grid;
  text-align: left;
  font-size: 16px;
}
.contendTitle {
  font-size: 18px;
  font-weight: 700;
}
</style>
  